Это ставим в Html-вверх

<div id="annoy" style="position: absolute; left: 20px; top: 30px; display:none; z-index: 150;"><table><tr><td height=200px width=468px bgcolor=#898989;><p align="center">Добро пожаловать!  </p>
<p align="center">Уважаемый Гость, пожалуйста, <a href="http://ваш адрес.ru/register.php" title="регистрация" >зарегистрируйтесь</a> или войдите на форум, используя свой логин и пароль</p>&nbsp;<p div align="center"><form id="login" class="container" method="post" action=" http://ваш адрес.ru/login.php?action=in" onsubmit="return my_form(this)">
<div align="center">
  <input type="hidden" name="form_sent" value="1"/>
  <input type="hidden" name="redirect_url" value="index.php"/>
</div>
<p align="center" class="inputfield required">
<label for="fld1" class="style1">Логин:</span></label>
<span class="input">
<input type="text" id="fld1" name="req_username" size="8" maxlength="25"/>
<label for="fld2">Пароль:</label>
<label for="fld2"></label>
<span class="input">
<input type="password" id="fld2" name="req_password" size="8" maxlength="25"/></span><br><br>
</p><div align="center">
    <input type="submit" class="button" name="login" value="Войти"/>
</td></tr></table></div>

А это ставим в Html-низ

<script type="text/javascript">
var crossobj=document.all? document.all.annoy : document.getElementById("annoy")
var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body
function positionit(){
var dsocleft=document.all? iebody.scrollLeft : pageXOffset
var dsoctop=document.all? iebody.scrollTop : pageYOffset
if (document.all||document.getElementById){
crossobj.style.left=parseInt(dsocleft)+5+"px"
crossobj.style.top=dsoctop+5+"px"
}
}
setInterval("positionit()",10)
</script>
<script type="text/javascript">
var t
var freak
function freakOut()
{document.getElementById("annoy").style.display="block"
t=setTimeout ("freakIn()", 30000)                       
}
function freakIn()
{document.getElementById("annoy").style.display="none"
t=setTimeout ("freakOut()", 3000)}   
if (document.getElementById('pun-status').innerHTML.indexOf("Гость")!=-1)
{freakOut()}
</script>

(Владимирская область)
Анапа (Краснодарский край)
Арзамас (Нижегородская область)
Архангельск (Архангельская область)
Архипо-Осиповка (Краснодарский край)
Астрахань (Астраханская область)
Боровск (Калужская область)
Брянск (Брянская область)
Валдай (Новгородская область)
Великий Новгород (Новгородская область)
Великий Устюг (Вологодская область)
Владимир (Владимирская область)
Волгоград (Волгоградская область)
Вологда (Вологодская область)
Воронеж (Воронежская область)
Выборг (Ленинградская область)
Вязьма (Смоленская область)
Гатчина (Ленинградская область)
Геленджик (Краснодарский край)
Городец (Нижегородская область)
Гороховец (Владимирская область)
Дубна (Московская область)
Екатеринбург (Свердловская область)
Елабуга (Республика Татарстан)
Елец (Липецкая область)
Звенигород (Московская область)
Иваново (Ивановская область)
Ижевск (Республика Удмуртия)
Изборск (Псковская область)
Йошкар-Ола (Республика Марий Эл)
Казань (Республика Татарстан)
Калининград (Калининградская область)
Калуга (Калужская область)
Касимов (Рязанская область)
Кириллов (Вологодская область)
Киров (Кировская область)
Коломна (Московская область)
Кострома (Костромская область)
Краснодар (Краснодарский край)
Красноярск (Красноярский край)
Кронштадт (Ленинградская область)
Курск (Курская область)
Малоярославец (Калужская область)
Москва (Московская область)
Мурманск (Мурманская область)
Муром (Владимирская область)
Мышкин (Ярославская область)
Нижний Новгород (Нижегородская область)
Новороссийск (Краснодарский край)
Новосибирск (Новосибирская область)
Омск (Омская область)
Орёл (Орловская область)
Павлово на Оке (Нижегородская область)
Переславль-Залесский (Ярославская область)
Пермь (Пермский край)
Петрозаводск (Республика Карелия)
Псков (Псковская область)
Пушкин (Ленинградская область)
Пушкинские горы (Псковская область)
Ростов Великий (Ярославская область)
Ростов-на-Дону (Ростовская область)
Рыбинск (Ярославская область)
Рязань (Рязанская область)
Самара (Самарская область)
Санкт-Петербург (Ленинградская область)
Саранск (Республика Мордовия)
Саратов (Саратовская область)
Светлогорск (Калининградская область)
Сергиев Посад (Московская область)
Серпухов (Московская область)
Смоленск (Смоленская область)
Соловки (Архангельская область)
Сочи (Краснодарский край)
Суздаль (Владимирская область)
Таганрог (Ростовская область)
Тамбов (Тамбовская область)
Таруса (Калужская область)
Тверь (Тверская область)
Тобольск (Тюменская область)
Тольятти (Самарская область)
Торжок (Тверская область)
Тула (Тульская область)
Тутаев (Ярославская область)
Тюмень (Тюменская область)
Углич (Ярославская область)
Ульяновск (Ульяновская область)
Уфа (Республика Башкортостан)
Чебоксары (Республика Чувашия)
Челябинск (Челябинская область)
Элиста (Республика Калмыкия)
Юрьев-Польский (Владимирская область)
Ярославль (Ярославская область)"></a>

Ставим в  HTML низ <script><!--Свои картинки вместо:Новая тема;Новый опрос;Ответить;Профиль;ЛС;и т.д. -->
   pstlnk=new Array(
  ".postlink","Новая тема",
"Ссылка на картинку","Ссылка на картинку при наведении",
  ".postlink","Новый опрос",
"Ссылка на картинку","Ссылка на картинку при наведении",
  ".postlink","Ответить",
"Ссылка на картинку","Ссылка на картинку при наведении",
  ".pl-email","Профиль",
"Ссылка на картинку","Ссылка на картинку при наведении",
  ".pl-email","ЛС",
"Ссылка на картинку","Ссылка на картинку при наведении",
  ".pl-email","E-mail",
"Ссылка на картинку","Ссылка на картинку при наведении",
  ".pl-website","Вебсайт",
"Ссылка на картинку","Ссылка на картинку при наведении",
  ".pl-delete","Удалить",
"Ссылка на картинку","Ссылка на картинку при наведении",
  ".pl-edit","Редактировать",
"Ссылка на картинку","Ссылка на картинку при наведении",
  ".pl-quote","Цитировать",
"Ссылка на картинку","Ссылка на картинку при наведении" // !ПОСЛЕДНИЙ элемент без запятой
)
function find_and_replace(value){var s0,s1,s2,s3,i; for (i=0; i < pstlnk.length; i=i+4){s0=pstlnk[i+2];
  s1="onmouseover=\"this.src='"+pstlnk[i+3]+"'\"";s2="onmouseout=\"this.src='"+s0+"'\"";
  s3='<img class="pst_lnk" src="'+s0+'" '+s1+' '+s2+' border="0" />';
  var str=$(value).find(pstlnk[i]+":contains('"+pstlnk[i+1]+"')").html();
  if (str!=null) {str=str.replace(pstlnk[i+1],s3);
$(value).find(pstlnk[i]+":contains('"+pstlnk[i+1]+"')").html(str);};};}
$("#pun-viewforum .linkst,#pun-viewforum .linksb,#pun-viewtopic .linkst,#pun-viewtopic .linksb,#pun-viewtopic .post .post-links").each(function(){find_and_replace(this);;});
</script>

!!!Внимание - если вы не хотите, чтобы окружающее изображение дергалось и смещалось до наведения и после: Оба изображения в паре(до наведения и после) должны иметь одинаковый внешний размер!
Кому-то, возможно, захочется скорректировать по высоте размещения кнопок "Новая тема","Новый опрос","Ответить",
В НТML верх тогда ставим такой код:
<style> /*корректируем кнопку "ответить;Нов.тема; Нов.опрос*/
.linkst .postlink{
margin-top:25px;
}
.linksb .postlink{
margin-top: -40px;
}
</style>
(*Значения красным - регулируем
Поправлено/7.02.11 - Тестируем!
Поскольку замечена проблема с установкой Своих картинок для Пожаловаться и Поделиться(для форумов ork) - выход был найден с помощью css
<style>
.pl-warning *,.pl-share *{
color:transparent!important;
}
.pl-warning{
height:31px;  /*высота картинки*/
width:100px;  /*ширина картинки*/
padding-left:32px!important;   /*Отступ слева*/
background:url(Адрес картинки для Пожаловаться) no-repeat bottom right;
}
.pl-warning:hover{
background:url(Адрес картинки для Пожаловаться при наведении) no-repeat bottom right;
}
.pl-share {
height:31px;  /*высота картинки*/
width:52px;  /*ширина картинки*/
padding-left:16px!important;   /*Отступ слева*/
background:url(Адрес картинки для Поделиться)  no-repeat bottom right;
}
.pl-share:hover{
background:url(Адрес картинки для Поделиться при наведении) no-repeat bottom right;
}
</style>
Отредактировано Deff (Сб, 16 Апр 2011 20:13:35)
ПрофильЛСE-mail

HTML верх<style>
div.splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}
.spll {width: 130px; height: 70px; }
.spll div.splCont {height: auto; width: 300px; background:  url(http://forumupload.ru/uploads/0003/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 0px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}
</style>
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script> 

HTML Низ<script type="text/javascript">
$(document).ready(function(){
$('.splLink').parent().hover(function(){
$(this).children('div.splCont').toggle('normal');
},
function(){
$(this).children('div.splCont').toggle('normal');
});
});
</script>

  Это там где нужно вам <center><table style="width: 90%">
<tr>

<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Первый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Второй контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Третий контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Четвёртый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Пятый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Шестой контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>

</tr>
</table></center>

  Настройки Внимание! Не меняйте НИКАКИЕ числовые значения в этой части кода! В противном случае меню перестанет работать!
б). Чтобы заменить информацию в основных блоках, найдите в коде слова "Первый блок". Замените их на нужное Вам. Это может быть как текстовая информация, так и графическая (картинки). Можно использовать любой HTML.

в). Чтобы заменить информацию в выпадающих блоках, найдите в коде слова "Тут будет что-то" и замените на нужную Вам информацию. Это может быть как текстовая информация, так и графическая (картинки). Можно использовать любой HTML.

3. Оформление меню.
Оформление выпадающего меню необходимо менять в первой части кода.
Ниже приведены доступные для пользователей изменения в дизайне:

а).
Код:
div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}

Отвечает за дизайн основных блоков.
width: 130px; - ширина основных блоков, в пикселах.
height: 40px; - высота основных блоков, в пикселах.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ основных блоков.
background: #FFFFCC; - цвет фона основных блоков.
text-align: center; - выравнивание текста в основных блоках (по-умолчанию: центр).
font-family: Comic Sans Ms; - шрифт в основных блоках меню.
font-size: 15px; - размер текста в основных блоках меню.
padding: 5px; - отступ от краёв основных блокв (поля).

б).
Код:
.spll {width: 130px; height: 70px; }

Не рекомендовано для изменения неопытным пользователям!
Замечание: width: 130px; менять одновременно с предыдущим значением ширины (ширина основных блоков).

в).
Код:
.spll div .splCont {height: auto; width: 300px; background:  url(http://forumupload.ru/uploads/0003/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}

Отвечает за дизайн выпадающих блоков.
height: auto; - высота выпадающих блоков. По-умолчанию осуществляется автоподгон по ширине. При необходимости можно заменить auto на любое числовое значение с указанием единиц измерения.
width: 300px; - ширина выпадающих блоков.
background:  url(http://forumupload.ru/uploads/0003/83/96/1556-1.png); - фоновое изображение выпадающих блоков. При необходимости можно установить непрозрачный цвет, путём замены на background: #FFFFCC; с указанием нужного цвета.
padding: 5px; - отступ от краёв выпадающих блокв (поля).
z-index: 1000; не рекомендовано к изменению. Данный параметр отвечает за наложение выпадающих блоков на форум. При уменьшении этого значения меню будет открывыться под таблицу форума. Если какой-либо элемент форума закрывает собой выпадающии меню, это значение необходимо увеличить.
margin-top: 5px; - отступ, между основными и выпадающими блоками. При значении 0 - без отступа.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ выпадающих блоков.
font-size: 12px; - размер текста в выпадающих блоках меню.
font-family: Microsoft Sans Serif; - шрифт в выпадающих блоках меню.
text-align: center; - выравнивание текста в выпадающих блоках (по-умолчанию: центр).
Внимание! Производить какие-либо изменения во второй части кода ЗАПРЕЩЕНО!

<a href=ССЫЛКА" target="_blank">Название </a>

<div style="position: fixed; right: 0; bottom: 0px; padding-right: 4px;"><img src='Ссылка на картинку'  style="cursor: pointer; margin-bottom: -14px;" onclick="$(this).next().slideToggle('slow', 'linear');"><div style="display: none;" id="dolj">
Тут текст
</div></div> 

  <!-- PopUp -->
<div id="popup" style="position:fixed; bottom:0px; right:0px; max-width:277px; border: solid 1px #322907; background-color:#fffceb; color:#322907; text-align: center; font-family:Arial; font-size: 14px; opacity: 0.9">
<table style="border:0px">
<tr><td>
<div style="position:absolute; top:0px; right:0px; padding:5px"><a href="#" onClick="ClosePopUp()"><img src="http://static.iconsearch.ru/uploads/icons/woothemesiconset/16x16/close.png" /></a></div>
</td></tr>
<tr><td style="padding:0px 10px">
Моя реклама, самая замечательная на свете
<br>Заказать рекламу можно по e-mail: mybb@mybb.ru
</td></tr>
</table>
</div>
<script language="JavaScript">
  var popupdiv = document.getElementById('popup');
  function ClosePopUp() {
    popupdiv.style.display = 'none';
  }
</script>
<!-- /PopUp -->   

  <img src="сюда ссылку">

<font color="цвет html" size="размер тип 2или 3 ">тут текст</font>

<br><br>